<template>
  <div
    class="home-container mt-[30px] flex flex-col justify-center items-center"
  >
    <template v-if="!resumeInfo">
      <h1 class="text-[36px]">简历解析</h1>
      <div class="w-[80%] mt-[20px]">
        <ElUpload
          class=""
          drag
          action="https://127.0.0.1:8081/upload"
          list-type="text"
          :auto-upload="false"
          :limit="1"
          :on-change="handleChange"
        >
          <ElIcon class="el-icon--upload"><UploadFilled /></ElIcon>
          <div class="el-upload__text">点击或拖拽上传</div>
          <template #tip>
            <div
              class="text-[16px] font-[500] flex flex-col items-center mt-[10px]"
            >
              <p>使用说明：选择或拖拽你的附件简历文件，并点击提交按钮。</p>
              <p>支持格式：pdf|doc|docx|txt格式, 最大5M。</p>
            </div>
          </template>
        </ElUpload>
        <div class="flex justify-center">
          <ElButton type="primary" class="w-[300px] mt-[20px]" @click="submit">
            提交
          </ElButton>
        </div>
      </div>
    </template>
    <template v-else>
      <h1 class="text-[36px]">简历信息</h1>
      <div class="w-[100%] flex justify-center">
        <ElTabs
          v-model="activeName"
          type="card"
          @tab-click="handleTabsClick"
          class="w-[100%] flex flex-col justify-center items-center mt-[20px]"
        >
          <ElTabPane name="result" label="解析结果" class="w-[100%] flex justify-center">
            <div
              class="w-[80%] mt-[20px] max-h-[700px] overflow-auto border-[1px] border-solid border-[#ccc] rounded-[4px] p-[20px]"
            >
              <div
                class="flex flex-col justify-center items-center mb-[15px]"
                style="border-bottom: 1px solid #ccc"
              >
                <div class="flex items-end">
                  <h1 class="text-[30px] font-[700] mr-[20px]">
                    {{ resumeInfo.name }}
                  </h1>
                  <h3 class="text-[22px] font-[700]">
                    {{ work_position || "某工作岗位" }}
                  </h3>
                </div>
                <div class="flex items-center mt-[10px]">
                  <p>{{ resumeInfo.gender_inf }}</p>
                  <p class="mx-[20px]">{{ resumeInfo.age || 18 }}岁</p>
                  <p>
                    {{
                      resumeInfo.work_year_norm ||
                      resumeInfo.work_year_inf ||
                      0
                    }}年工作经验
                  </p>
                </div>
                <div class="flex items-center mt-[10px]">
                  <p class="mr-[20px]" v-if="resumeInfo.college">
                    {{ resumeInfo.college }}
                  </p>
                  <p class="mr-[20px]" v-if="resumeInfo.degree">
                    {{ resumeInfo.degree }}
                  </p>
                  <p class="mr-[20px]" v-if="resumeInfo.phone">
                    {{ resumeInfo.phone }}
                  </p>
                  <p class="mr-[20px]" v-if="resumeInfo.email">
                    {{ resumeInfo.email }}
                  </p>
                </div>
              </div>
              <div>
                <div class="w-[100%]">
                  <h2 class="text-[30px] font-[700]">基础信息</h2>
                  <div class="whitespace-break-spaces">
                    {{ resumeInfo.cont_basic_info }}
                  </div>
                </div>
                <div class="w-[100%]">
                  <h2 class="text-[30px] font-[700]">个人标签</h2>
                  <div class="">
                    <ElTag
                      v-for="tag in resumeInfo.skills_objs"
                      :key="tag"
                      type="primary"
                      class="mr-[10px] mb-[10px]"
                      effect="dark"
                    >
                      {{ tag.skills_name }}
                    </ElTag>
                  </div>
                </div>
                <div class="w-[100%]">
                  <h2 class="text-[30px] font-[700]">教育经历</h2>
                  <div class="whitespace-break-spaces">
                    {{ resumeInfo.cont_education }}
                  </div>
                </div>
                <div class="w-[100%]">
                  <h2 class="text-[30px] font-[700]">个人技能</h2>
                  <div class="whitespace-break-spaces">
                    {{ resumeInfo.cont_job_skill }}
                  </div>
                </div>
              </div>
            </div>
          </ElTabPane>
          <ElTabPane name="pdf" label="PDF" class="w-[100%]">
            <embed
              :src="`http://localhost:8081/${resumeInfo.filePath}`"
              type="application/pdf"
              width="100%"
              height="800px"
            />
          </ElTabPane>
        </ElTabs>
      </div>
    </template>
  </div>
</template>

<script>
import { ref, inject, computed } from "vue";
import {
  ElButton,
  ElUpload,
  ElIcon,
  ElTag,
  ElTabs,
  ElTabPane,
} from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import Api from "@/api";

export default {
  components: {
    ElButton,
    ElUpload,
    ElIcon,
    UploadFilled,
    ElTag,
    ElTabs,
    ElTabPane,
  },
  setup() {
    const globalState = inject("globalState");
    const username = computed(() => globalState.username);
    const fileList = ref([]);
    const resumeInfo = ref(null);
    const submit = () => {
      // Api.getUserResume(username.value).then((res) => {
      //   console.log(res);
      //   if (res.code !== 0) {
      //     return ElMessage.error(res.message);
      //   }
      //   const result = res.data;
      //   if (!result) {
      //     return ElMessage.error("解析失败");
      //   }
      //   resumeInfo.value = result;
      //   ElMessage.success("上传成功");
      // });
      const file = fileList.value[0];
      if (!file) {
        return ElMessage.error("请选择要上传的文件");
      }
      const formData = new FormData();
      formData.append("file", file.raw);
      formData.append("username", username.value);
      Api.uploadResume(formData).then((res) => {
        if (res.code !== 0) {
          return ElMessage.error(res.message);
        }
        const result = res.data;
        if (!result) {
          return ElMessage.error("解析失败");
        }
        resumeInfo.value = result;
        ElMessage.success("上传成功");
      });
    };
    const handleChange = (file, files) => {
      console.log(file, files);
      fileList.value = files;
    };
    const activeName = ref("result");
    const handleTabsClick = (tab) => {
      console.log(tab);
      activeName.value = tab.name;
    };
    return {
      submit,
      handleChange,
      resumeInfo,
      activeName,
      handleTabsClick,
    };
  },
};
</script>

<style lang="scss">
.el-tabs__content {
  width: 100%;
}
</style>
